<template>
  <el-dialog append-to-body title="查看物联码" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'640px'">
    <div v-loading="loading">
      <el-table :data="tableList">
        <el-table-column prop="goodsName" label="商品信息">
          <template slot-scope="scope">
            <div class="flex align-center">
              <img :src="baseImgUrl + scope.row.surfaceImg" class="show_avator" v-if="scope.row.surfaceImg" />
              <span class="show_avator" v-else>无封面</span>

              <div class="text-ellipsis padding_left_10" :title="scope.row.goodsName">{{ scope.row.goodsName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="attributes" label="属性">
          <template slot-scope="scope">
            <div v-for="(value, name, index) in scope.row.attributes" :key="'attr' + index">{{ name }}：{{ value }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" width="180"></el-table-column>
      </el-table>
      <div>
        <h4>详细信息</h4>
        <div>
          <p v-for="(item, index) in codeList" :key="index">{{ item.id }}</p>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button  @click="closeModal()">取消</el-button> -->
      <el-button type="primary" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getGoodsUniqueCode } from '../services/index'

export default {
  props: {
    visible: {
      type: Boolean,
      defalut: false,
    },
    goodCode: {
      type: String,
      defalut: '',
    },
    childSkuId: {
      type: String,
      defalut: '',
    },
    data: {
      type: Object,
      defalut: null,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      codeDetailData: null,
      codeList: [],
      childId: '',
      skuId: '',
      tableList: [],
      baseImgUrl: process.env.VUE_APP_FILE_URL + '/',
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue, oldValue) {
        if (!newValue) return
        this.tableList = this.tableList.concat(this.data)
        if (!this.goodCode) return
        this.childId = this.goodCode
        this.searchExpress(this.goodCode)
      },
    },
  },
  created() {
    // this.tableList = this.tableList.concat(this.data);
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false)
      // this.data = null
      this.tableList = []
      this.codeList = []
    },
    searchExpress() {
      this.loading = true
      getGoodsUniqueCode({ subOrderId: this.childId })
        .finally(() => (this.loading = false))
        .then(data => {
          if (data.code == 200 && data.data) {
            this.codeList = data.data
          } else {
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.cell {
  flex: 1;

  &.half {
    width: 50%;
  }

  .cell_item {
    padding: 7.5px 0;

    > span {
      display: inline-block;

      &:first-child {
        width: 7em;
      }

      &:last-child {
        width: calc(100% - 7.5em);
        color: gray;
      }
    }
  }
}
.show_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}
</style>
